<template>
    <div>
        <div style="background: #fff">
            <div class="detail flex-row plr15 ptb10">
                <img :src="detail.pro_img" alt="">
                <div class="detail-content">
                    <p>{{detail.prd_name}}</p>
                    <span>价格：{{computePrice(detail.prd_price)}}</span>
                </div>
            </div>
            <textarea class="evaulate-content plr15 ptb15 fs14" name="" id="" cols="30" rows="5"
                      placeholder="请对商品进行评价" v-model="form.text"></textarea>
            <div class="flex-row plr15 evaulate-star-box">
                <div class="evaulate-star flex-row" @click="choiceStar(0)" :class="{'star-active':starActive==0}">
                    <van-icon name="flower-o"/>
                    <span>好评</span>
                </div>
                <div class="evaulate-star flex-row" @click="choiceStar(1)" :class="{'star-active':starActive==1}">
                    <van-icon name="flower-o"/>
                    <span>中评</span>
                </div>
                <div class="evaulate-star flex-row" @click="choiceStar(2)" :class="{'star-active':starActive==2}">
                    <van-icon name="flower-o"/>
                    <span>差评</span>
                </div>
            </div>
        </div>

        <div class="btn-box ptb10">
            <van-button class="btn" size="large" @click="submit">提交评价</van-button>
        </div>
    </div>

</template>

<script>
    export default {
        name: "OrderEvaulate",
        data() {
            return {
                oid: '',
                form: {
                    prdID: '',
                    text: '',
                    star: 4
                },
                detail: {},
                starActive: 4
            }
        },
        created() {
            console.log(this.$route.query.item)
            this.oid = this.$route.query.oid
            this.form.prdID = JSON.parse(this.$route.query.item).prdID
            console.log(this.form.prdID)
            this.detail = JSON.parse(this.$route.query.item)
            console.log(this.detail)
        },
        methods: {
            submit() {
                if (this.form.text == '') return this.fail('评价内容不能为空')
                if (this.form.star > 3) return this.fail('请选择评分')
                console.log(this.form)
                this.$store.dispatch(types.ORDER_EVALUATE, {oid: this.oid, data: this.form}).then(res => {
                    console.log(res)
                    if (res.code != 0) return this.fail(res.msg)
                    this.success('评价成功')
                    this.$router.go(-1)
                })

            },
            choiceStar(val) {
                this.starActive = this.form.star = val
            }
        }
    }
</script>

<style scoped lang="scss">
    .evaulate-content {
        width: 100%;
    }

    .detail {
        height: 100px;
        width: 100%;
        img {
            width: 80px;
            height: 80px;
        }
        .detail-content {
            flex: 1;
            height: 100%;
            padding-left: 5px;
            font-size: 14px;
        }
    }

    .evaulate-star-box {
        width: 100%;
        justify-content: space-around;
        height: 40px;
        font-size: 14px;
        .evaulate-star {
            .van-icon {
                font-size: 16px;
            }
        }
    }

    .star-active {
        color: red !important;
        .van-icon {
            color: red !important;
        }
    }
</style>